<template>
    <div class="address-container">
        <div class="address-box">
            <div class="address-box-title">
                <span @click="cancel">取消</span>
                <p>选择收货地址</p>
            </div>
            <div class="address-list">
                <div class="address-item" v-for="(item, index) in addressArr" :key="item.id">
                    <span :class="{'choice-item': true, 'has-choice': isCheck == index}" @click="changeCheck(index, item)"></span>
                    <div class="have-address-box">
                        <p class="address-person">{{item.name}}<span>{{item.telephone}}</span></p>
                        <p :class="{'address-info': true, 'default': item.isDefault == 1}">
                           {{item.city}}  {{item.detailAddress}}
                        </p>
                    </div>
                     <router-link tag="span" class="write-address-btn" :to="'/edit_address/' + item.id"></router-link>
                </div>
            </div>
            <div class="add-address-btn common-btn" @click="changeAddress">添加收货地址</div>
        </div>
    </div>
</template>
<script>
import { post } from '../../../util/http.js'
export default {
    data () {
        return {
            isCheck: -1,
            index: 0,
            addressArr: [],
            curAddress: {}
        }
    },
      mounted() {
        this.$nextTick(() => {
            let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
            post('http://dlsapi.rz158.com/address/selectAddress', {
                agentId: info.agentId
            }).then(res => {
                if(res.code != 0) {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                } else {
                    this.addressArr = res.t
                }
            })
        })
    },
    methods: {
        changeCheck (index, item) {
            this.isCheck = index
            this.curAddress = item
            this.$emit('selectAddress', this.curAddress)
        },
        changeAddress() {
           this.$router.push('/add_address')
        },
        cancel () {
            this.$emit('cancelAddress', true)
        }
    }
}
</script>
<style lang="less" scoped>
    .address-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        .address-box {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #fff;
            .address-box-title {
                padding: 0 0.3rem;
                color: #282828;
                font-size: 0.3rem;
                height: 0.8rem;
                line-height: 0.8rem;
                text-align: center;
                position: relative;
                border-bottom: 1px solid #ccc;             
                span {
                    position: absolute;
                    left: 0.3rem;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 999;
                }
            }
            .address-list {
                padding: 0 0.3rem 0.3rem 0.3rem;
                .address-item {
                    position: relative;
                    // height: 1.7rem;
                    width: 100%;
                    border-bottom: 1px solid #ccc;
                    &:last-child {
                        border-bottom: none;
                    }
                    .choice-item {
                        position: absolute;
                        width: 0.26rem;
                        height: 0.26rem;
                        border-radius: 0.3rem;
                        border: 1px solid #ccc;
                        top: 50%;
                        margin-top: -0.13rem;
                        left: 0;
                        z-index: 999;                        
                    }
                    .has-choice {
                        background: url(../../assets/img/icon-agree.png) no-repeat;
                        background-size: 100%;
                    }
                    .write-address-btn {
                        width: 0.34rem;
                        height: 0.34rem;
                        background: url(../../assets/img/write-icon.png) no-repeat;
                        background-size: 100%;
                        position: absolute;
                        right: 0.3rem;
                        top: 50%;
                        margin-top: -0.17rem;
                        z-index: 999;
                    }
                    .have-address-box {
                        // height: 1.7rem;
                        font-size: 0.3rem;
                        color: #282828;
                        padding: 0.2rem 0.3rem;
                        box-sizing: border-box;
                        position: relative;
                        .address-person {
                            font-size: 0.3rem;
                            color: #282828;
                            margin: 0 0.2rem;
                            margin-bottom: 0.1rem;
                            span {
                                margin-left: 0.2rem;
                            }
                        }
                        .address-info {
                            width: 5.5rem;
                            margin-left: 0.2rem;
                            font-size: 0.28rem;
                            line-height: 0.32rem;
                            text-align: left;
                        }
                        .default {
                            width: 5rem;
                            margin-left: 0.8rem;
                            &::before {
                                content: '';
                                display: inline-block;
                                width: 0.5rem;
                                height: 0.3rem;
                                margin-left: -0.6rem;
                                background: url(../../assets/img/default-icon.png) no-repeat;
                                background-size: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

